<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jc</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <section>
        <p class="text">
            There are many apple trees in a garden. They’re good friends. One day an old tree is ill. There are many pests in the tree. Leaves of the tree turn yellow. The old tree feels very sad and unwell. Another tree sends for a doctor for him. At first, they send for a pigeon, but she has no idea about it. Then they send for an oriole, and she can’t treat the old tree well. Then they send for a woodpecker. She is a good doctor. She pecks a hole in the tree and eats lots of pests. At last the old tree becomes better and better.
        </p>
    </section>
</body>
<script>
    const text=document.querySelector('.text');
    text.innerHTML=text.textContent.replace(/\S/g,"<span>$&</span>")
    // 定义几秒后恢复
    let goBackTime=2;

    const letters = document.querySelectorAll("span");
    for(let i=0;i<letters.length;i++){
        letters[i].addEventListener('mouseover',function(){
            letters[i].classList.add('active')
            letters[i].classList.add('active'+i)
            // 恢复,用lambda表达式
            setTimeout(()=>{
                let letter = document.querySelector('.active'+i)
                letter.classList.remove("active");
                letter.classList.add("show");
            },goBackTime*1000)

            
        })
    }
</script>
</html>